<style>
    .layui-table-body .layui-table-cell {
        height: 100px;
        line-height: 100px;
    }

    .layui-table img {
        max-width: 150px;
    }

    #dialog_sort {
        position: absolute;
        top: 65px;
        left: 20px;
        right: 500px;
        background: white;
        height: 400px;
        padding: 20px;
        box-sizing: border-box;
        overflow-y: auto;
        display: none;
        border: 1px solid #E3E3E3;
    }

    #dialog_sort .sort-level1 > span {
        color: black;
        font-size: 16px;
        cursor: pointer;
    }

    #dialog_sort .sort-level1 {
        clear: left;
    }

    #dialog_sort .sort-level2 {
        padding: 10px;
        box-sizing: border-box;
        flex-flow: column;
    }

    #dialog_sort .sort-level2 span {
        line-height: 30px;
        width: 80px;
        text-align: center;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
    }
</style>
<div class="fsh-rightPanel">
    <label> <input type="password" style="display: none"></label>
    <div class="layui-anim layui-anim-upbit">
        <div class="layui-form-item wx-search" id="list_form">
            <span class="layui-btn layui-btn-primary" id="btn-srot"><i class="iconfont icon-category"></i><span
                    id="sort_title">全部</span></span>
            <div class="layui-inline" style="padding-top: 5px">
                <input type="text" name="squad_name" placeholder="请输入课程名称" autocomplete="off" class="layui-input">
            </div>
            <button class="layui-btn btn-primary" id="search">搜索</button>
            <div class="layui-btn-container" style="text-align: right">
                <button class="layui-btn btn-primary" id="role_add">新增课程</button>
            </div>
        </div>
        <table id="list_table" class="layui-hide" lay-filter="mainList"></table>
    </div>
</div>

<div id="dialog_sort">
    <div class="sort-level1">
        <span href="#">CG</span>
        <div class="sort-level2">
            <span>基础</span> <span>基础</span> <span>基础</span> <span>基础</span> <span>基础</span> <span>基础</span>
        </div>
        <span>动画</span>
        <div class="sort-level2">
            <span>基础</span> <span>基础</span> <span>基础</span> <span>基础</span>
        </div>
        <span>VR</span>
        <div class="sort-level2">
            <span>基础</span> <span>基础</span> <span>基础</span>
        </div>
        <span>引擎</span>
        <div class="sort-level2">
            <span>基础</span> <span>基础</span> <span>基础</span>
        </div>
    </div>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="del">删除</button>
    </div>0
</script>
<script>
    layui.use(['layer', 'table','util'], function () {
        var layer = layui.layer;
        var table = layui.table;
        var util = layui.util;
        var tableObj = table.render({//展示已知数据
            elem: '#list_table'
            , url: context + '/api/educourse/getList?top_parent_id=0'
            , request: {
                limitName: 'pageSize'
            }
            , cols: [[ //标题栏
                {type: 'numbers'},
                {
                    title: '封面', align: 'center', width: 200, templet: function (d) {
                        return '<div><img src="' + d.img_url + '"  style="width: 150px;height: 80px" alt=""/></div>';
                    }
                },
                {field: 'course_task', title: '课程名称', align: 'center'}
                , {field: 'major_name', title: '课程分类', align: 'center'}
                , {
                    title: '课程难度', align: 'center',
                    templet: function (d) {
                        return (d.difficulty_level + 1) + '级';
                    }
                }
                , {field: 'createUserId', title: '创建人', align: 'center'}
                , {
                    title: '创建时间', align: 'center', templet: function (d) {
                        return util.toDateString(d.createDate, 'yyyy-MM-dd HH:mm:ss');
                    }
                }
                , {
                    field: 'lock', title: '操作', width: 240, align: 'center', unresize: true,
                    templet: function (d) {
                        return '<a href="javascript:;" class="font-primary" lay-event="design">课程设计</a>'
                            + '<a href="javascript:;" class="font-primary" lay-event="update">修改</a>'
                            + '<a href="javascript:;" class="font-primary" lay-event="del">删除</a>'
                    }
                }
            ]]
            // ,skin: 'line' //表格风格
            , even: true
            , page: true //是否显示分页
            , limits: [10, 20, 30]
            , limit: 20 //每页默认显示的数量
        });

        // 检索
        $("#search").click(function () {
            reloadTable(tableObj);
        });
        // 添加
        $("#role_add").click(function () {
            jump('views/static/courseware/template/add');
        });
        // 分类
        $("#btn-srot").click(function () {
            $('#dialog_sort').toggle();
        });
        $(".sort-level1 span").click(function () {
            $("#sort_title").html($(this).html())
            $('#dialog_sort').hide();
        });

        //表格内部操作按钮监听
        table.on('tool(mainList)', function (obj) { //注：tool是工具条事件名，mainList是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值

            if (layEvent === 'design') {
                jump('views/static/courseware/template/design2[id='+data.course_id
                    +'&title='+data.course_task
                    +'&easy='+data.difficulty_level
                    +'&kind='+data.major_id
                    +']');
            } else if (layEvent === 'find') {
                jump('views/common/detail');
            } else if (layEvent === 'del') {
                // 删除
                layer.confirm('确认删除此课程？', {
                    icon: 7,
                    title: "提示",
                    btn: ['确认', '取消'] //按钮
                }, function () {
                    layer.closeAll();
                });
            } else {

            }
        });
    });
</script>
